<script lang="ts" setup>
import { computed } from 'vue';
import type { Coupon } from '@/types/coupon';
import CouponIcon from './coupon-icon.vue';
import CouponMeta from './coupon-meta.vue';
import CouponBtn from './coupon-btn.vue';

const props = defineProps<{
  item: Coupon;
}>();

const isDisabled = computed(() => {
  return props.item.state !== 1;
});

function navigateToDetails() {
  uni.navigateTo({
    url: '/pages/coupons/details?item=' + JSON.stringify(props.item)
  });
}
</script>

<template>
  <view :class="{ 'is-disabled': isDisabled }" class="coupon-card" @click="navigateToDetails">
    <coupon-icon :disabled="isDisabled" :scene="item.scene"></coupon-icon>
    <view class="flex-1">
      <coupon-meta
        :at-least="item.atLeast"
        :disabled="isDisabled"
        :end-date="item.endTime"
        :start-date="item.startTime"
        :title="item.couponName"
      ></coupon-meta>
    </view>
    <view class="flex items-center">
      <coupon-btn :disabled="isDisabled" :status="item.state"></coupon-btn>
    </view>
  </view>
</template>

<style lang="scss">
.coupon-card {
  position: relative;
  display: flex;
  width: 702rpx;
  padding: 32rpx;
  background: #fff;
  border-radius: 16rpx;
}
</style>
